<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox,ElLoading  } from 'element-plus';
import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";
import {getMemberLevelList,getMemberCount,getMemberLayeringList} from '@/api/Member/index.js'
import SelectCoupon from './Components/SelectCoupon.vue'
import { saveTask } from '@/api/Marketing/coupon.js'
import { closeTag } from '@/utils/globalWay'
import { limitInt } from '@/utils/common.js'
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const topbarRef = ref(null);
const stepBarList = ['基本信息', '发放规则'];
const backValue = ref('CouponOrganizeIndex');
const tabName = ref("新增发放");
const activeStep = ref(0)
const keepLoading = ref(false);
const formRef = ref(null);
const sendRef = ref(null);
const selectCouponRef = ref(null);
const levelList = ref([]);
const layerList = ref([]);
const allMemberCount = ref(0);
const form = ref({
    name:"",
    remark:"",
    sendType:0,
    sendObject:0,
    isMemberType:false,
    memberLevel:[],
    memberlayer:[],
    memberphone:"",
    sendWay:0,
    useTimeValue:"",
    useTimeValueArr:["",""],
    useTimeActiveValueArr:["",""],
    modalShow:0
})

// 每人每天限领
const dayLimitNum = ref(null)
// 发放时间限领
const totalLimitNum = ref(null)
// 次数
const newVipNum = ref(null)
const showLimitation = computed(()=>{
    let flag = false
    if(form.value.sendType == 1){
        if(form.value.sendObject == 0){
            if(!form.value.isMemberType){
                flag = true
            }else{
                flag = false
            }
        }else{
           if(form.value.sendObject != 2 ){
                flag = true
           }
        }
    }else{
        flag = false
    }
    return  flag
})
const showLimitations = computed(()=>{
    return (form.value.sendType == 1 && (form.value.sendObject == 2 || (form.value.sendObject == 0 && form.value.isMemberType)))
})

const sendForm = ref({
    needValue:"1",
    couponList:[]
})
const rules = ref({
    memberLevel:[
        { validator: (rule, value, callback) => {
                if(value.length<=0){
                    return callback(new Error("请选择会员等级"));
                }else{
                    return callback();
                }
            }, trigger: "change"
        },
    ],
    memberlayer:[
        { validator: (rule, value, callback) => {
                if(value.length<=0){
                    return callback(new Error("请选择会员分层"));
                }else{
                    return callback();
                }
            }, trigger: "change"
        },
    ],
    memberphone:[
        { validator: (rule, value, callback) => {

                if((value??'') === ''){
                    return callback(new Error("请输入手机号码"));
                }else{
                    const reg = /^(\+86|0086)?\s*1[3456789]\d{9}$/;
                    let errKey = -1;
                    let emptyKey = -1;
                    let phoneArr = value.split(/\n/);
                    if(phoneArr.length>5000){
                        return callback(new Error(`最多支持5000个手机号`));
                    }
                    for(let i = 0;i<phoneArr.length;i++){
                        if((phoneArr[i]??'') === ''){
                            emptyKey = i;
                            break;
                        }
                        if(!reg.test(phoneArr[i])){
                            errKey = i;
                            break;
                        }
                    }
                    if(emptyKey != -1){
                        return callback(new Error(`第${ emptyKey + 1 }条数据手机号不能为空`));
                    }
                    if(errKey != -1){
                        return callback(new Error(`第${ errKey + 1 }条数据手机号输入错误`));
                    }
                    return callback();
   
                }
            }, trigger: "change"
        },
    ],
    useTimeValueArr:[
        { validator: (rule, value, callback) => {
                if((form.value.useTimeValueArr??'') === ''){
                    return callback(new Error("请选择指定时间"));
                }
                if(((form.value.useTimeValueArr[0]??'') === '') || ((form.value.useTimeValueArr[1]??'') === '')){
                    return callback(new Error("请选择指定时间"));
                }else{
                    return callback();
                }
            }, trigger: "change"
        },
    ],
    useTimeActiveValueArr:[
        { required:true,validator: (rule, value, callback) => {
                if((form.value.useTimeActiveValueArr??'') === ''){
                    return callback(new Error("请选择指定时间"));
                }
                if(((form.value.useTimeActiveValueArr[0]??'') === '') || ((form.value.useTimeActiveValueArr[1]??'') === '')){
                    return callback(new Error("请选择指定时间"));
                }else{
                    return callback();
                }
            }, trigger: "change"
        },
    ],
})
const sendRules = ref({


})
const changeSendType = (value)=>{
    form.value.modalShow = 0;
    form.value.sendWay = 0;
    form.value.useTimeValue = "";
    form.value.useTimeValueArr = ["",""];
    form.value.useTimeActiveValueArr = ["",""];
    sendForm.value.couponList = [];

}
const changeSendObject = (value)=>{
    form.value.memberLevel = [];
    form.value.memberlayer = [];
    form.value.memberphone = "";
    form.value.useTimeValue = "";
    form.value.useTimeValueArr = ["",""];
}
const changeSendWay = (value)=>{
    form.value.useTimeValue = "";
    form.value.useTimeValueArr = ["",""];
}
const stepChange = (index) => {

}

const nextHandle = ()=>{
    if(activeStep.value == 0){
        formRef.value.validate((validOne, fields,msg)=>{
            if(validOne){
                activeStep.value++;
            }
        })
    }

    
    if(activeStep.value >= 1){


        sendRef.value.validate(async (validTwo, fields,msg)=>{
            if(validTwo){
                if(sendForm.value.couponList.length<=0){
                    ElMessage.error('请选择优惠券！');
                    return;
                }
            
                if(form.value.sendType == 0 && form.value.sendObject == 2){
                    let flag = await submitPrevTips();
                    if(flag){
                        submit();
                    }

                }else{
                    submit();
                }           

            }
        })

    }
}
const prevHandle = ()=>{
    activeStep.value --;
}
const _getMemberLevelList = async ()=>{
    try{
        let result = await getMemberLevelList();
        levelList.value = result;
    }catch(e){
        console.log(e);
    }
}
_getMemberLevelList();
const _getMemberLayeringList = async ()=>{
    try{
        let result = await getMemberLayeringList();
        layerList.value = result;
        console.log(layerList.value,222);
    }catch(e){
        console.log(e);
    }
}
_getMemberLayeringList();
const _getMemberCount = async ()=>{
    try{
        let result = await getMemberCount();
        allMemberCount.value = result;
    }catch(e){
        console.log(e);
    }
}
_getMemberCount();
const checkMemberLevelPerson = computed(()=>{
    let personNum = 0;
    levelList.value.forEach(lis=>{
        if(form.value.memberLevel.includes(lis.id)){
            personNum = personNum + Number(lis.userTotal)
        }
    })
    return personNum;
})
const checkMemberLayerPerson = computed(()=>{
    let personNum = 0;
    layerList.value.forEach(lis=>{
        if(form.value.memberlayer.includes(lis.id)){
            personNum = personNum + Number(lis.layeringNumber)
        }
    })
    return personNum;
})


const inputPhone = ()=>{

    let phoneArr = form.value.memberphone.split(/\n/);

    if(phoneArr.length>5000){

        let phoneString = phoneArr.slice(0,5000).join("");
        let phoneStringLength = phoneString.length + phoneArr.length - 2;
        form.value.memberphone = form.value.memberphone.slice(0,phoneStringLength);
    }
}
const backCoupon = (value)=>{
    sendForm.value.couponList = value;

    if(form.value.sendType == 1){
        sendForm.value.couponList.forEach(e=>{
            e.limitFlag =  e.limitFlag ||false;
            e.dayLimitNum = e.dayLimitNum || 1
            e.totalLimitNum = e.totalLimitNum || 1
            e.newVipNum = e.newVipNum || 1
        })
    }
}

// 批量填充
const batchFilling = ()=> {
    sendForm.value.couponList.forEach(e=>{
        e.dayLimitNum = Number(dayLimitNum.value)
        e.totalLimitNum = Number(totalLimitNum.value)
        e.newVipNum = Number(newVipNum.value)
    })
    sendRef.value.clearValidate(["isSendNum"]);
}
const submitPrevTips = ()=>{
    return new Promise((resolve,reject)=>{
        ElMessageBox({
            type: 'warning',
            title: '提示',
            showCancelButton: false,
            confirmButtonText:'确定',
            message:"发放期间可能会新增会员，请确保发放数量充足!",
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    resolve(true);
                    done()
                    
                } else {
                    resolve(false);
                    done()
                }
            },
        })
    })
}
const submit = async ()=>{

    let params = {
        taskName:form.value.name,
        remark:form.value.remark,
        taskType:form.value.sendType,
        targetType:form.value.sendObject,
        unconsumed:form.value.isMemberType?1:0,
        targetIds:[],
        phones:form.value.memberphone,
        taskDateType:form.value.sendWay,
        taskStartTime:"",
        taskEndTime:"",
        showCouponPopup:form.value.modalShow == 1?false:true,
        couponsList:[]
    }
    if(form.value.sendObject == 1){
        params.targetIds = form.value.memberLevel;
    }else if(form.value.sendObject == 3){
        params.targetIds = form.value.memberlayer;
    }
    if(form.value.sendType == 0 && form.value.sendWay == 1){
        if(form.value.sendObject != 2){
            params.taskStartTime = form.value.useTimeValue;
            params.taskEndTime = "";
        }else{
            params.taskStartTime = form.value.useTimeValueArr[0];
            params.taskEndTime = form.value.useTimeValueArr[1];
        }
    }else if(form.value.sendType == 1){
        params.taskStartTime = form.value.useTimeActiveValueArr[0];
        params.taskEndTime = form.value.useTimeActiveValueArr[1];
    }
    sendForm.value.couponList.forEach(lis=>{
        if(form.value.sendType == 1){
            if(form.value.sendObject  == 2 || (form.value.sendObject == 0 && form.value.isMemberType)){
                params.couponsList.push({
                    couponsId:lis.id,
                    newVipNum: lis.newVipNum,
                    num:Number(lis.sendNum),
                    limitFlag: 1
                })
            }else{
                params.couponsList.push({
                    couponsId:lis.id,
                    limitFlag: lis.limitFlag,
                    dayLimitNum: !lis.limitFlag  ? 0 : lis.dayLimitNum,
                    totalLimitNum: !lis.limitFlag  ? 0 : lis.totalLimitNum,
                    num:Number(lis.sendNum)
                })
            }
           
        }else{
            params.couponsList.push({
                couponsId:lis.id,
                num:Number(lis.sendNum)
            })
        }
       
    })
    keepLoading.value = true;
    try{
        await saveTask(params)
        ElMessage.success('新增成功');
        closeTag(route.name);
        router.replace({name:backValue.value});
    }catch(e){
    }finally{
        keepLoading.value = false;
    }
}
const openCouponList = ()=>{
    selectCouponRef.value.openModal(form.value.sendType,sendForm.value.couponList);
}
const delCoupon = (index)=>{
    ElMessageBox(
        {
            cancelButtonText: '取消',
            type: 'warning',
            title: '提示',
            showCancelButton: true,
            confirmButtonText:'删除',
            confirmButtonClass:'el-button--danger',
            message:"确定删除该优惠券？",
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true
                    instance.confirmButtonText = 'Loading...'
                    try {
                        sendForm.value.couponList.splice(index,1);
                        ElMessage.success('删除成功');
                    } catch (error) {
                        ElMessage.error('删除失败');
                    }finally{

                        instance.confirmButtonLoading = false
                        done()
                    }
                    
                } else {
                    done()
                }
            },
        }
    )
}
const changeSendNum = (key)=>{

    if((sendForm.value.couponList[key].sendNum??'') === ''){
        sendForm.value.couponList[key].sendNum = 1
    }
    if(sendForm.value.couponList[key].sendNum<1){
        sendForm.value.couponList[key].sendNum = 1;
    }
    if(form.value.sendType == 0){
        if(sendForm.value.couponList[key].maxNum>2){
            if(sendForm.value.couponList[key].sendNum>2){
                sendForm.value.couponList[key].sendNum = 2;
            }
        }else{
            if(sendForm.value.couponList[key].sendNum>sendForm.value.couponList[key].maxNum){
                sendForm.value.couponList[key].sendNum = sendForm.value.couponList[key].maxNum;
            }

        }

    }else if(form.value.sendType == 1){
        if(sendForm.value.couponList[key].sendNum>sendForm.value.couponList[key].maxNum){
            sendForm.value.couponList[key].sendNum = sendForm.value.couponList[key].maxNum;
        }
    }
}


const frequencyRules = (values) => {
  return [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (values) {
          callback();
        } else {
          callback(new Error("请输入每人每天限领次数"));
        }
      },
      trigger: "blur",
    },
  ];
};

const sendTimeRules = (values)=>{
    return [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (values) {
          callback();
        } else {
          callback(new Error("请输入发放时间限领次数"));
        }
      },
      trigger: "blur",
    },
  ];
}
const sendTimesRules = (values)=>{
    return [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (values) {
          callback();
        } else {
          callback(new Error("请输入次数"));
        }
      },
      trigger: "blur",
    },
  ];
}

</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName" ref="topbarRef">
            <template #operate>
                <el-button @click="prevHandle()" v-if="activeStep >= 1">上一步</el-button>

                <el-button type="primary" style="min-width: 68px" @click="nextHandle()" :loading="keepLoading">
                    <span v-if="activeStep == 0">下一步</span>
                    <span v-if="activeStep >= 1">保存</span>
                </el-button>
            </template>
        </TopBar>
        <div class="info-contain">
            <div class="stepBar-box">
                <div v-for="(item, index) in stepBarList" :key="item" @click="stepChange(index)"
                :class="`stepBar-item ${activeStep === index ? 'stepBar-activeItem' : ''}`">{{ item }}</div>
            </div>
            <div style="width:100%" v-if="activeStep == 0">
                <el-form :model="form" label-width="130px" :rules="rules" ref="formRef">
                    <div class="form-contain">
                        <el-form-item label="发放名称" :rules="getRules('input', '发放名称')" prop="name">
                            <el-input v-model="form.name" placeholder="请输入"  style="width:360px" show-word-limit :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label="备注名称" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入，仅后台可见"  style="width:360px" show-word-limit :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label="发放类型" prop="sendType" :rules="getRules('change', '发放类型')">
                            <el-radio-group v-model="form.sendType" @change="changeSendType">
                                <el-radio :label="0">自动发放</el-radio>
                                <el-radio :label="1">主动领取</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="发放对象" prop="sendObject" :rules="getRules('change', '发放对象')">
                            <el-radio-group v-model="form.sendObject" @change="changeSendObject">
                                <el-radio :label="0">全部会员({{ allMemberCount }}人)</el-radio>
                                <!-- <el-radio :label="1">指定会员等级({{ checkMemberLevelPerson }}人)</el-radio> -->
                                <el-radio :label="3">指定会员分层({{ checkMemberLayerPerson }}人)</el-radio>
                                <el-radio :label="2">新会员</el-radio>
                                <el-radio :label="4">指定会员</el-radio>
                            </el-radio-group>
                            <div style="width:100%" v-if="form.sendObject == 0">
                                <div style="width:100%">
                                    <el-switch v-model="form.isMemberType" active-text="未消费会员" inactive-text="全部" active-color=""/>
                                </div>
                                <div class="tips">
                                    全部：全部注册会员；未消费会员：注册后消费订单数量为0的会员；
                                </div>
                            </div>
                            <div style="width:100%;margin-top:4px; " v-if="form.sendObject == 1">
                                <el-form-item label="" prop="memberLevel" label-width="0px">
                                    <el-select v-model="form.memberLevel" placeholder="请选择"  clearable v-selectClose style="width:400px" multiple collapse-tags>
                                        <el-option :label="item.levelName" :value="item.id" v-for="(item,index) in levelList" :key="index"/>
                                    </el-select>  
                                </el-form-item> 
                            </div>
                            <div style="width:100%;margin-top:4px; " v-if="form.sendObject == 3">
                                <el-form-item label="" prop="memberlayer" label-width="0px">
                                    <el-select v-model="form.memberlayer" placeholder="请选择"  clearable v-selectClose style="width:400px" multiple collapse-tags>
                                        <el-option :label="item.layeringName" :value="item.id" v-for="(item,index) in layerList" :key="index"/>
                                    </el-select>   
                                </el-form-item>
                            </div>
                            <div style="width:100%" v-if="form.sendObject == 2">
                                <div class="tips">
                                    会员注册时间＞发放活动开始时间
                                </div>
                            </div>
                            <div style="width:100%;margin-top:4px; " v-if="form.sendObject == 4">
                                <el-form-item label="" prop="memberphone" label-width="0px">
                                    <el-input type="textarea" v-model="form.memberphone" placeholder="请输入会员的手机号，以回车换行隔开；最多支持5000个手机号，超出部分不录" style="width:260px" :rows="5" @input="inputPhone" ></el-input>
                                </el-form-item>        
                            </div>
                        </el-form-item>

                        <el-form-item label="发放时间" prop="sendType" :rules="getRules('change', '发放时间')" v-if="form.sendType == 0">
                            <el-radio-group v-model="form.sendWay" @change="changeSendWay">
                                <el-radio :label="0">立即发放</el-radio>
                                <el-radio :label="1">指定时间</el-radio>
                            </el-radio-group>
                            <div style="width:100%;margin-top:4px; " v-if="form.sendWay == 1 && form.sendObject != 2">
                                <el-form-item label="" prop="useTimeValue" :rules="getRules('change', '时间')" label-width="0px">
                                    <div style="width:260px">
                                        <el-date-picker style="width:100%" v-model="form.useTimeValue" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                                    </div>
                                </el-form-item>
                            </div>
                            <div style="width:100%;margin-top:4px; " v-if="form.sendWay == 1 && form.sendObject == 2">
                                <el-form-item label="" prop="useTimeValueArr" label-width="0px">
                                    <div style="width:374px">
                                        <el-date-picker style="width:100%" v-model="form.useTimeValueArr" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item label="弹窗显示" prop="modalShow" :rules="getRules('change', '弹窗显示')" v-if="form.sendType == 0">
                            <el-radio-group v-model="form.modalShow">
                                <el-radio :label="0">是</el-radio>
                                <el-radio :label="1">否</el-radio>
                            </el-radio-group>
                            <div style="width:100%" >
                                <div class="tips">
                                    若选择【是】，会员进入商城首页会弹窗展示本次发放的优惠券
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="发放时间" prop="useTimeActiveValueArr" v-if="form.sendType == 1">
                            <div style="width:374px">
                                <el-date-picker style="width:100%" v-model="form.useTimeActiveValueArr" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div style="width:100%" v-if="activeStep == 1">
                <el-form :model="sendForm" label-width="80px" :rules="sendRules" ref="sendRef">
                    <el-form-item label="发放内容" :rules="getRules('select', '发放内容')" prop="needValue">
                        <div style="width:100%;display:flex;justify-content:space-between;align-items:center;">
                            <div style="width:100%;display:flex;justify-content:flex-start;align-items:center;">
                            <el-button plain type="primary" @click="openCouponList()">
                                <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px">
                                选择
                            </el-button>
                            <div class="tips" style="margin-left:8px;line-height:32px" v-if="form.sendType == 0">
                                最多选择3种，每种最多发放2张
                            </div>
                        </div>
                            <el-button v-if="form.sendType == 1 && sendForm.couponList?.length"  type="primary" @click="batchFilling">批量填充</el-button>
                        </div>
                        
                        <div style="width:100%;margin-top:8px" v-if="sendForm.couponList && sendForm.couponList.length>0">
                            <el-table :data="sendForm.couponList" style="width: 100%" stripe >
                                <el-table-column prop="couponsName" label="优惠券名称">
                                </el-table-column>
                                <el-table-column prop="sendNum" label="赠券数" v-if="form.sendType == 0">
                                    <template #header>
                                        <div class="info-show">
                                            <div class="text-show" style="font-size: 14px;font-weight: bold;color: #313233;">
                                                赠券数
                                            </div>
                                            <el-tooltip placement="top">
                                                <template #content>
                                                    <div class="tips-info">
                                                        赠券数：单个发券对象发放数量
                                                    </div>
                                                </template>
                                                <img src="@/assets/images/warning-circle.png" alt="" class="img">
                                            </el-tooltip>

                                        </div>
                                    </template>
                                    <template #default="{ row,$index }">
                                        <el-input @input="()=>{row.sendNum=limitInt(row.sendNum)}" size="small" placeholder="请输入" v-model="row.sendNum" style="width:100px" @blur="changeSendNum($index)"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="isSendNum" label="是否限制次数" v-if="showLimitation">
                                    <template #="{row,$index}">
                                        <el-radio-group v-model="row.limitFlag" class="ml-4">
                                            <el-radio :label="false" size="large">不限</el-radio>
                                            <el-radio :label="true" size="large">限制</el-radio>
                                        </el-radio-group>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="isSendNum" label="每人每天限领" v-if="showLimitation">
                                    <template #header>
                                        <el-input-number style="min-width: 130px;" controls-position="right"   v-model="dayLimitNum" size="small" placeholder="每人每天限领" />
                                    </template>
                                    <template #="{row,$index}">
                                        <el-form-item 
                                        v-if="row.limitFlag"
                                        :prop="`isSendNum`"
                                        label=""
                                        :inline-message="true"
                                        :rules="row['limitFlag'] && frequencyRules(row.dayLimitNum)"
                                        >
                                        <el-input-number
                                            v-model="row.dayLimitNum"
                                            :min="1"
                                            size="small"
                                            controls-position="right"
                                            />
                                        </el-form-item>
                                        <span v-else>-</span>
                                    </template>
                                    
                                </el-table-column>

                                <el-table-column prop="isSendNum" label="发放时间限领" v-if="showLimitation">
                                    <template #header>
                                        <el-input-number style="min-width: 130px;" controls-position="right"   v-model="totalLimitNum" size="small" placeholder="发放时间限领" />
                                    </template>
                                    <template #="{row,$index}">
                                        <el-form-item 
                                        v-if="row.limitFlag"
                                        :prop="`isSendNum`"
                                        label=""
                                        :inline-message="true"
                                        :rules="row['limitFlag'] && sendTimeRules(row.totalLimitNum)"
                                        >
                                        <el-input-number
                                            v-if="row.limitFlag"
                                            v-model="row.totalLimitNum"
                                            :min="1"
                                            size="small"
                                            controls-position="right"
                                        />
                                        </el-form-item>

                                       
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="136" prop="isSendNum" label="次数" v-if="showLimitations">
                                    <template #header>
                                        <el-input-number controls-position="right"   v-model="newVipNum" size="small" placeholder="次数（次）" />
                                    </template>
                                    <template #="{row,$index}">
                                        <el-form-item 
                                    
                                        :prop="`isSendNum`"
                                        label=""
                                        :inline-message="true"
                                        :rules="sendTimesRules(row.newVipNum)"
                                        >
                                        <el-input-number
                                            v-model="row.newVipNum"
                                            :min="1"
                                            size="small"
                                            controls-position="right"
                                        />
                                        </el-form-item>

                                    </template>

                                </el-table-column>
                                <el-table-column prop="maxNum" label="剩余数量">
                                    
                                </el-table-column>
                                <el-table-column prop="maxNum" label="优惠内容">
                                    <template #default="{ row }">
                                        <div class="info-show">
                                            <div class="text-show" >
                                                满{{ `${ row.thresholdAmount?row.thresholdAmount:'' }` }}减{{ `${ row.discountsAmount?row.discountsAmount:'' }` }}
                                                
                                            </div>
                                            <el-tooltip placement="top">
                                                <template #content>
                                                    <div class="tips-info">
                                                    1.优惠内容：满{{ `${ row.thresholdAmount?row.thresholdAmount:'' }` }}减{{ `${ row.discountsAmount?row.discountsAmount:'' }` }}；
                                                    2.适用门店及业务：{{ row.businessScope  == 0?'全部门店及业务':`指定门店及业务` }}；
                                                    3.适用范围：{{ ["全部商品可用","指定商品可用","指定商品不可用"][row.activityScope] }}
                                                    </div>
                                                </template>
                                                <img src="@/assets/images/warning-circle.png" alt="" class="img">
                                            </el-tooltip>

                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="120">
                                    <template #default="{ $index }">
                                        <el-button type="danger" plain size="small" @click="delCoupon($index)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
    <SelectCoupon  ref="selectCouponRef" @backCoupon="backCoupon"></SelectCoupon>
</template>
<style lang="less" scoped>

</style>
<style lang="less" scoped>
.tips-info{
    max-width: 300px; 
}
.info-show{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .text-show{
        max-width: calc(100% - 14px);
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
        
    }
    .img{
        width: 14px;
        height: 14px;
        cursor: pointer;

    }
}
:deep(.el-table__row){
    .el-input .el-input__wrapper{
        background: rgba(0,0,0,0);
    }
}
:deep(.el-table th.el-table__cell){
    background: #EBEBEB;
}
:deep(.el-table__inner-wrapper::before){
    width: 0;
}
.tips{
    color: #666666;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;  
    margin-top:4px; 

}
.form-contain{
    width: 100%;
    margin-top:16px;
    
}
.page-contain{
    width: 100%;
    height: 100%;
}
.info-contain{
    width: 100%;
    height: calc(100% - 48px);
    box-sizing: border-box;
    padding:16px 24px;
    :deep(.el-switch__core){
        --el-switch-off-color: var(--el-color-primary);
        background: var(--el-color-primary);;
    }
}

.stepBar-box {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;

  .stepBar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    width: 306px;
    height: 40px;
    color: #000;
    font-size: 16px;
    -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    background: #EBF2FF;
    cursor: pointer;
  }

  .stepBar-activeItem {
    color: #fff;
    background: #3480FF;
  }

  .stepBar-item:first-of-type {
    margin-left: 0;
    -webkit-clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
  }
}
:deep(.el-table__header){
    tr{
        th{
            .cell{
                border-right: 0px;
            }
        }
    }
}
</style>
